<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template slot="filter-content">

        <el-input v-model="listQuery.params.realName" placeholder="搜索人员" style="width: 200px;" class="filter-item" />

        <el-button-group class="filter-item" style="float:  right">
          <el-button size="mini" icon="el-icon-download" @click="exportExcel">导出</el-button>
        </el-button-group>
      </template>

      <template slot="data-columns">
        
        <el-table-column
          label="人员"
          prop="realName"
          align="center"
        />

        <el-table-column
          label="考试次数"
          prop="tryCount"
          align="center"
        />

        <el-table-column
          label="最高分"
          prop="maxScore"
          align="center"
        />

        <el-table-column
          label="是否通过"
          align="center"
        >

          <template slot-scope="scope">
            <span v-if="scope.row.passed" style="color: #00ff00;">通过</span>
            <span v-else style="color: #ff0000;">未通过</span>
          </template>

        </el-table-column>

        <el-table-column
          label="最后考试时间"
          prop="updateTime"
          align="center"
        />

        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleExamDetail(scope.row.examId, scope.row.userId)">明细</el-button>
            <el-button type="success" size="mini" icon="el-icon-finished" @click="handlerExamBookT(scope.row.examId, scope.row.userId)">答案</el-button>
            <el-button type="danger" size="mini" icon="el-icon-close" @click="handleDelete(scope.row.examId, scope.row.userId)">删除</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog title="考试明细" :visible.sync="dialogVisible" width="60%">

      <div class="el-dialog-div">
        <my-paper-list :exam-id="examId" :user-id="userId" />
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import MyPaperList from './paper'
import { exportExcel} from '@/api/user/exam/exam'
import { fetchList, removeData, changeState } from '@/api/common'

export default {
  name: 'ExamUserList',
  components: { MyPaperList, DataTable },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      examId: '',
      userId: '',
      deleteUrl:'',
      listUrl:'',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/user/exam/paging',
        deleteUrl: '/exam/api/exam/exam/remove',
      }
    }
  },

  created() {
    this.listQuery.params.examId = this.$route.params.examId
  },
  methods: {

    // 开始考试
    handleExamDetail(examId, userId) {
      this.examId = examId
      this.userId = userId
      this.dialogVisible = true
    },

    handlerExamBookT(examId,userId) {
      this.$router.push({ name: 'ShowExamT', params: { id: examId,userId: userId }})
    },
     handlerExamBook(examId) {
      this.$router.push({ name: 'BookList', params: { examId: examId }})
    },

    exportExcel() {
      // 导出当前查询的数据
      exportExcel(this.listQuery.params)
    },
      /**
     * 查询数据列表
     */
     getList() {
      this.listLoading = true;
      this.listQuery.t = new Date().getTime()
      fetchList(this.options.listUrl, this.listQuery).then(response => {
        this.dataList = response.data
        this.listLoading = false
      })
    },
    /**
     * 删除数据
     */
     handleDelete(examId,userId) {
      // 删除
      this.$confirm('确实要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeData(this.options.deleteUrl, examId,userId).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
          window.location.reload();
      });
      })
    }
   
  }
}
</script>

<style scoped>

  .el-dialog-div{
    height: 60vh;
    overflow: auto;
    padding: 10px;
  }

</style>
